<style lang="less">
  .listd {
    height: 100%;
    .city {
      position: relative;
      max-height: 200rpx;
      height: 200rpx;
      .hd {
        width: 100%;
        position: fixed;
        top: 0;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        position: absolute;
        top: 60rpx;
        width: 100%;
        .mth {
          width: 90%;
          margin: 0 auto;
          display: flex;
          color: #ffffff;
          .head {
            flex: 2;
            margin-right: 20rpx;
            text-align: left;
            justify-content: left;
            .name {
              margin-top: 20rpx;
            }
            image {
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
              border: 2px solid #ffffff;
              box-sizing: 0 0 2px #ccc;
            }
          }
          .meta {
            flex: 2;
            display: flex;
            font-size: 30rpx;
            height: 120rpx;
            line-height: 120rpx;
          }
          .utp {
            flex: 2;
            font-size: 24rpx;
            text-align: right;
            height: 120rpx;
            line-height: 120rpx;
            .number {
              margin-right: 15rpx;
            }
          }
        }
      }
    }
    .list {
      margin-top: 30rpx;
      .empty {
        text-align: center;
        margin: 15rpx auto;
        background: #ffffff;
        padding: 15rpx;
        .center {
          margin: 0 auto;
          width: 100%;
          display: block;
          image {
            width: 50%;
            height: 200rpx;
          }
        }
      }
      .aboutUser {
        width: 100%;
        margin: 15rpx auto;
        padding: 0 2%;
        display: flex;
        .user {
          flex: 6;
          .u1 {
            width: 60rpx;
            height: 60rpx;
            float: left;
            margin: 5rpx;
            border-radius: 50%;
          }
        }
        .btn {
          flex: 2;
          padding-top:1%;
          text-align: center;
          .about {
            color: #fff;
            font-size: 24rpx;
            padding: 6rpx 15rpx;
            line-height: normal;
            border-radius: 8rpx;
            display: inline-block;
            background-color: rgb(150, 151, 153);
          }
          .hover {
            background: rgb(25, 137, 250);
          }
        }
      }
    }
    .fadeIn {
      .tips {
        border:1px solid #f1f1f1;
        position:relative;
        padding: 20rpx;
        margin: 20rpx 0;
        box-sizing: border-box;
        font-size: 26rpx;
        color: #333333;
        background: rgba(255, 255, 255, 0.9);
        .em {
          display:block;
          border-width:40rpx;
          position:absolute;
          bottom:-40px;
          left:45%;
          border-style:solid dashed;
          border-color:#09F transparent transparent;
          font-size:0; line-height:0;
        }
        .span {
          display:block;
          border-width:40rpx;
          position:absolute;
          bottom:-33px;
          left:45%;
          border-style:solid dashed;
          border-color:#FFF transparent transparent;
          font-size:0;
          line-height:0;
        }
        .lgt {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .all {
          -webkit-line-clamp: 100;
        }
        .icon {
          width: 100%;
          margin: 0 auto;
          text-align: center;
          display: block;
          height: 60rpx;
          line-height: 60rpx;
        }
      }
    }
    .address {
      clear: both;
      width: 100%;
      color: #ffffff;
      font-size: 24rpx;
      position: relative;
      padding-left: 15rpx;
      top: 10rpx;
      text-shadow: 0 0 1px #222;
      .iconfont {
        margin-right: 10rpx;
      }
    }
    .addressInfo {
      position: relative;
      height: 90px;
      margin-top: 30px;
    }
  }
  .other {
    padding-top: 120rpx;
  }
  .iconSize {
    font-size: 28rpx;
  }
</style>
<template>
  <view class="container">
    <custom :isBack="true" fontColor="#fff" :fullHide="true" :bgColor="bgColor">
      <view slot="backText">返回</view>
      <view slot="content" v-if="bgColor !=='none'">
        {{info.name}}
      </view>
    </custom>
    <scrolls @loader="loadMore" @scroll="scrollTop" :loads="loads">
      <view slot="content">
        <view class="listd">
          <view class="other bg-gradual-blue padding shadow-blur">
            <view class="city">
              <view class="info">
                <view class="mth">
                  <view class="head">
                    <image :src="info.header"/>
                  </view>
                  <view class="meta top" v-if="false">{{info.name}}</view>
                  <view class="utp top">
                    <text class="number">{{totals}}人关注</text>
                    <text class="iconfont" @tap="addAbout()">
                      {{isAbout ? '&#xe608;' : '&#xe601;'}}
                    </text>
                  </view>
                </view>
                <view class="address" v-if="info.ids === 19">
                  <text class="iconfont">&#xeb96;</text>
                  <text class="name">{{info.address}}</text>
                </view>
              </view>
            </view>
            <view class="clear"></view>
            <view class="cu-list menu">
              <view class="cu-item" style="background:none">
                <view class="content">
                  <view class="name">{{info.name}}</view>
                </view>
                <view class="action">
                  <view class="cu-avatar-group">
                    <view class="cu-avatar round sm"
                          v-for="(item,index) in aboutList" :key="index"
                          :style="{'background-image':'url('+item.user_avatar+')'}"/>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="fadeIn">
            <view class="tips bubble">
              <text class="lgt" :class="{'all':showAll}">{{info.desc}}</text>
              <text class="icon lg text-gray iconSize"
                    :class="[showAll ? 'cuIcon-fold' : 'cuIcon-unfold']"
                    @tap="showAll = !showAll"></text>
            </view>
          </view>
          <cateline :name="info.name" :right="total"></cateline>
          <view class="list">
            <view class="aboutUser" v-if="false">
              <view class="user" v-for="(item, index) in aboutList" :key="index">
                <image class="u1" :src="item.user_avatar"></image>
              </view>
              <view class="btn" @tap="addAbout()">
                <text class="about hover" v-if="!isAbout">我要关注</text>
                <text class="about" v-else>取消关注</text>
              </view>
            </view>
            <view class="listrow">
              <listd :list="hotList" width="95%" animate="fadeInUp"></listd>
            </view>
            <view class="empty" v-if="false">
              <div class="center">
                <image src="http://img.he29.com/play/3d74fe91463b148f5e26f4a58c12bcb84ea0796f.png"/>
              </div>
              <text class="auth">当前城市/地区暂无全景数据</text>
            </view>
          </view>
        </view>
        <view class="bgts">
          <image :src="info.hdBgt" style="opacity:0.2"></image>
        </view>
      </view>
    </scrolls>
  </view>
</template>
<script type="text/javascript">
  /**
   * Created by PhpStorm.
   * User:  iyahe@qq.com (天明)
   * Date: 2020/1/2 0002
   * Time: 下午 17:54
   * Description:
   */
  import scrolls from '@/components/scrolls'
  import listd from '@/components/base/listd'
  import tips from '@/plugin/tips'
  import cateline from '@/components/cateline'
  import custom from '@/components/custom'
  export default {
    props: {
      option: {
        type: Object,
        default: {},
      },
      model: {
        type: String,
        default: 'school',
      }
    },
    data() {
      return {
        title: '微云全景',
        hotList: [],
        favList: [],
        ids: '',
        info : {},
        page: 1,
        parms: {},
        isAbout: false,
        aboutList:[],
        totals: 0,
        bgts: 'http://img.he29.com/play/a8c305f6e0cb16f0ede4ed68b94b8d3e20fa901d.jpeg',
        total: '',
        showAll: false,
        bgColor: 'none',
        loads: 1
      }
    },
    computed: {},
    watch: {
      option (){
        const parm = this.option.id.split('_');
        this.parms.id = parm[0];
        this.parms.cate = parm[1];
        this.getCityInfo();
        this.getAboutInfo();
        this.pageList()
      },
      model () {
        this.watchModel();
      }
    },
    components: {
      listd,
      cateline,
      scrolls,
      custom
    },
    methods: {
      loadMore (){
        this.pageList();
      },
      vrEvent (item) {
        href('tour/wait?id=' + item.work_id);
      },
      addAbout () {
        this.$ajax.requrst('about/addAbout', {
          id: this.option,
          model: this.model,
        }).then(res => {
          if (res.code > 0) {
            tips.alert(res.msg);
            this.isAbout = !this.isAbout;
            this.getAboutInfo()
          } else {
            tips.error(res.msg);
          }
        })
      },
      pageList() {
        this.loads = 2;
        this.$ajax.requrst('index/hotList', {
          page: this.page++,
          cate: this.parms.id,
          parms: this.parms.cate
        }, true).then(res => {
          this.total = `共${res.info.total}幅作品`;
          this.loads = 3;
          if (res.code > 0) {
            if (res.info.data.length > 0) {
              this.loads = 1;
              this.hotList = [...this.hotList, ...res.info.data];
            }
          }
        })
      },
      getCityInfo () {
        this.$ajax.requrst('city/infos', this.parms).then(res => {
          if (res.code > 0) {
            this.info = res.info;
            this.$tools.setTitle(this.info.name);
            this.$emit('info', this.info)
          }
        })
      },
      getAboutInfo () {
        this.$ajax.requrst('about/sceneUser', {
          id: this.option,
        }).then(res => {
          if (res.code > 0) {
            this.aboutList = res.info.list;
            this.isAbout = res.info.about;
            this.totals = res.info.total;
          }
        })
      },
      watchModel () {
        setTimeout(()=> {
          this.bgts = this.sysbgt[this.model];
        })
      },
      scrollTop (item) {
        if (item.scrollTop >= 70) {
          this.bgColor =  this.$gloub.lineColor;
        } else {
          this.bgColor = 'none';
        }
      }
    },
    onLoad () {
      this.watchModel();
    }
  }
</script>
